<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search" height="80" placeholder="请输入商户名"></u-search>
		</view>
		<scroll-view class="scroll-list" scroll-y="true"  style="width: 100%; height: 90%; margin-top: 5rpx;margin-bottom: 5rpx;" @scrolltolower="loadMore">
			<view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;">
				<u-collapse :head-style="headStyle">
					<js-collapse-item :title="item.shmc+' | '+item.shdm" class="u-border-bottom ">
						<view class="tabContain">
							<u-table>
								<u-tr>
									<u-th width="28%">商户代码</u-th>
									<u-td>{{item.shdm}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">商户名称</u-th>
									<u-td>{{item.shmc==""?"-":item.shmc}}</u-td>
								</u-tr>
								<u-tr>
									<u-th width="28%">地点</u-th>
									<u-td>{{item.dd==""?"-":item.dd}}</u-td>
								</u-tr>
							</u-table>
						</view>
					</js-collapse-item>
				</u-collapse>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
		</scroll-view>
	</view>
</template>
<script>
	import $time from '@/common/time.js';
	import JsCollapseItem from '@/components/js-collapse-item/js-collapse-item.vue'
	export default {
		components: {
			JsCollapseItem
		},
		data() {
			return {
				keywords: '',
				query: {
					current: 1,
					size: 10 
				},
				swiperCurrent:0,
				list: [],
				pages: 0,
				loadStatus: 'loadmore',
				headStyle: {
					fontWeight: 'bold',
					color: '#606266',
					margin: '16rpx'
				},
			};
		},
		onLoad() {
			this.loadList();
		},
		computed:{
			
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			getTitle(title,t){
				let len = 14;
				if(title.length>len){
					title=title.substring(0,len);
				}
				title=title+" | "+this.formatTime(t);
				return title;
			},
			formatTime(t) {
				return $time.dateFormat(new Date(t.replace(/-/g, '/')),"{Y}-{MM}-{DD}");
			},
			search(value) {
				this.list = [];
				this.query.current = 0;
				this.query.keywords=value;
				this.loadList();
			},
			
			loadList() {
				this.$u.api.yikatong.yktShxxList(this.query).then(res => {
					if (!res.data.records || res.data.records.length == 0) {
						this.loadStatus = "nomore";
						return;
					}
					this.list = this.list.concat(res.data.records);
					this.pages = res.pages;
					this.query.current = res.data.current;
					this.query.size = res.data.size;
					this.loadStatus = "loadmore";
				});
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.current += 1;
					this.loadList();
				}, 100);
			},
		}
	};

</script>
<style lang="scss">
@import '../../../common/uni.css';
page {
	background-color: #f5f5f5;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
	width: 100%;
}
.search{
	height:55px;
	background-color: #ffffff;
	// background-image: url(/static/aidex/school_bg.jpg);
	background-size: 450px;
}
.uni-title{
	font-size: 30rpx;
	color: #333333;
	padding: 10px;
	background: #fff;
	border-top:1px solid #ededed;
	margin-top: 20rpx;
}
.uni-media-list {
    padding: 15px 15px;

}
.uni-media-list-body {
    height: 60px;
	padding-left:20rpx;
	border-left:thick double #D5D5D5;
	border-width: 1px;
}
.uni-media-list-text-top{
	width: 100%;
	line-height: 35rpx;
	font-size: 28rpx;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-text-content {
    width: 100%;
    line-height: 35rpx;
    font-size: 22rpx;
	color: darkgray;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-text-bottom {
    width: 100%;
    line-height: 24rpx;
    font-size: 26rpx;
	color: #666666;
	text-align: right;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-right {
    height: 60px;
	padding-left:20rpx;
	transform: translateY(40%) translateX(50%)
}

</style>